<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="ES6介绍​        ECMAScript，简单来说就是发布规定脚本语言的标准。 ​        ES6，全称就是 ECMAScript 6.0，是在 2015 年正式通过的。 内容let const​        新建了 let 和 const 声明 ​        let const 和 var 的区别：  作用域： let const 的 作用域 处于括号级作用域，var 是一个">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript-ES6">
<meta property="og:url" content="http://tallgy.gitee.io/2022/03/05/JavaScript/ES6/JavaScript-ES6/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="ES6介绍​        ECMAScript，简单来说就是发布规定脚本语言的标准。 ​        ES6，全称就是 ECMAScript 6.0，是在 2015 年正式通过的。 内容let const​        新建了 let 和 const 声明 ​        let const 和 var 的区别：  作用域： let const 的 作用域 处于括号级作用域，var 是一个">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://tallgy.gitee.io/.io//promises.png">
<meta property="article:published_time" content="2022-03-05T13:53:11.000Z">
<meta property="article:modified_time" content="2023-06-25T08:57:29.338Z">
<meta property="article:author" content="tallgy">
<meta property="article:tag" content="随笔">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://tallgy.gitee.io/.io//promises.png">


<link rel="canonical" href="http://tallgy.gitee.io/2022/03/05/JavaScript/ES6/JavaScript-ES6/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://tallgy.gitee.io/2022/03/05/JavaScript/ES6/JavaScript-ES6/","path":"2022/03/05/JavaScript/ES6/JavaScript-ES6/","title":"JavaScript-ES6"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>JavaScript-ES6 | tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#ES6"><span class="nav-number">1.</span> <span class="nav-text">ES6</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.1.</span> <span class="nav-text">介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%85%E5%AE%B9"><span class="nav-number">1.2.</span> <span class="nav-text">内容</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#let-const"><span class="nav-number">1.2.1.</span> <span class="nav-text">let const</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="nav-number">1.2.2.</span> <span class="nav-text">模板字符串</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="nav-number">1.2.3.</span> <span class="nav-text">箭头函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="nav-number">1.2.4.</span> <span class="nav-text">函数参数默认值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Spread-Rest-%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="nav-number">1.2.5.</span> <span class="nav-text">Spread&#x2F;Rest 操作符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%92%8C%E5%85%AB%E8%BF%9B%E5%88%B6%E7%9A%84%E5%AD%97%E9%9D%A2%E9%87%8F"><span class="nav-number">1.2.6.</span> <span class="nav-text">二进制和八进制的字面量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="nav-number">1.2.7.</span> <span class="nav-text">解构赋值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%B1%BB"><span class="nav-number">1.2.8.</span> <span class="nav-text">类</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Promise"><span class="nav-number">1.2.9.</span> <span class="nav-text">Promise</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Promise-then"><span class="nav-number">1.2.9.1.</span> <span class="nav-text">Promise.then():</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Promise-catch"><span class="nav-number">1.2.9.2.</span> <span class="nav-text">Promise.catch():</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Promise-finally"><span class="nav-number">1.2.9.3.</span> <span class="nav-text">Promise.finally():</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Promise-all"><span class="nav-number">1.2.9.4.</span> <span class="nav-text">Promise.all:</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Promise-allSettled"><span class="nav-number">1.2.9.5.</span> <span class="nav-text">Promise.allSettled:</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Promise-any"><span class="nav-number">1.2.9.6.</span> <span class="nav-text">Promise.any:</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Promise-race"><span class="nav-number">1.2.9.7.</span> <span class="nav-text">Promise.race:</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#generator-%E7%94%9F%E6%88%90%E5%99%A8"><span class="nav-number">1.2.10.</span> <span class="nav-text">generator 生成器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="nav-number">1.2.11.</span> <span class="nav-text">模块化</span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/03/05/JavaScript/ES6/JavaScript-ES6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          JavaScript-ES6
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-03-05 21:53:11" itemprop="dateCreated datePublished" datetime="2022-03-05T21:53:11+08:00">2022-03-05</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h1><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>​        ECMAScript，简单来说就是发布规定脚本语言的标准。</p>
<p>​        ES6，全称就是 ECMAScript 6.0，是在 2015 年正式通过的。</p>
<h2 id="内容"><a href="#内容" class="headerlink" title="内容"></a>内容</h2><h3 id="let-const"><a href="#let-const" class="headerlink" title="let const"></a>let const</h3><p>​        新建了 let 和 const 声明</p>
<p>​        let const 和 var 的区别：</p>
<ul>
<li>作用域： let const 的 作用域 处于括号级作用域，var 是一个函数级的作用域，关于作用域的问题，我们后面在进行详细的学习</li>
<li>变量提升：let ，const 不会出现变量提升。而var会出现变量提升的效果。</li>
<li>const 常量，不可变。</li>
</ul>
<h3 id="模板字符串"><a href="#模板字符串" class="headerlink" title="模板字符串"></a>模板字符串</h3><p>​        ` `，ES6增加了模板字符串，可以进行换行，以及可以在字符串中拼接表达式 ${}。</p>
<h3 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h3><p>​        添加了 箭头函数，() =&gt; {}</p>
<ul>
<li>函数上下文：this 的指向不同，普通函数的this指向处于调用时的调用栈的this指向。而箭头函数的函数上下文在定义时已经确定了，无法改变。</li>
<li>不存在构造器函数：因为不存在构造器函数，所以不能使用new方法，会报错。</li>
</ul>
<h3 id="函数参数默认值"><a href="#函数参数默认值" class="headerlink" title="函数参数默认值"></a>函数参数默认值</h3><p>​        </p>
<h3 id="Spread-Rest-操作符"><a href="#Spread-Rest-操作符" class="headerlink" title="Spread/Rest 操作符"></a>Spread/Rest 操作符</h3><p>​        简单来说就是 … ，我们可以使用 … 将数组解开为单个元素，也能将元素合并为一个数组。</p>
<h3 id="二进制和八进制的字面量"><a href="#二进制和八进制的字面量" class="headerlink" title="二进制和八进制的字面量"></a>二进制和八进制的字面量</h3><ul>
<li>0o xx：八进制</li>
<li>0b xx：二进制</li>
</ul>
<h3 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h3><p>​        可以将对象和数组进行解构</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let &#123;a&#125; = obj</span><br><span class="line">let [c, d] = arr</span><br></pre></td></tr></table></figure>

<p>​        注意：</p>
<ul>
<li>对象的解构，是针对名字进行的，没有的键会为undefined，我们也可以赋予默认值</li>
<li>数组的解构是通过下标的对应，对于不要的我们可以使用 ,, 将其赋值给不存在的变量，也可以使用 spread 和 rest 操作符进行合并赋值。</li>
</ul>
<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><p>​        ES6 新增了一个关于 Class 的语法糖。</p>
<p>​        类的ES5的实现</p>
<p>​        new 方法的过程：</p>
<ul>
<li>创建一个this的空对象，同时继承函数的原型。</li>
<li>然后再执行方法。</li>
<li>如果返回的不是对象，那么就返回this。否则返回对象。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">一次new操作：</span><br><span class="line">创建一个this，原型指向了fn的原型</span><br><span class="line">let this = Object.create(fn.prototype)</span><br><span class="line"></span><br><span class="line">调用fn</span><br><span class="line">let res = fn.apply(this, args)</span><br><span class="line"></span><br><span class="line">通过判断res的类型来判断返回是res还是this</span><br><span class="line">return typeof res === &#x27;object&#x27; ? res : this;</span><br></pre></td></tr></table></figure>



<p>构造器</p>
<p>​        ES6的构造器，就是类在进行new方法时会执行的一个方法。对于没有构造器的方法不能使用new方法。</p>
<p>​        类的构造器，实际上就是在new方法执行时会执行的函数</p>
<p>​        同时使用 class 创建的函数，是一个 不可枚举的。存在于实例的 proto 中。 fn.proto === Fn.prototype 。</p>
<p>super</p>
<p>​        构造器内部可以调用super方法执行父类的构造器。</p>
<ul>
<li><p>在普通方法中，super指向了父类的原型，this是子类的实例</p>
</li>
<li><p>在静态方法中，super指向了父类，this就是子类</p>
</li>
<li><p>同时，不能直接输出super，super需要以方法或属性的形式调用 super() super.fn() super.cc</p>
</li>
</ul>
<p>继承</p>
<p>​        class A extend B</p>
<ul>
<li>继承可以使用super来调用父类的方法和构造器</li>
<li>所谓的继承就是，可以将父类的方法放到子类进行调用，同时父类的构造器生成的属性也会放到子类。</li>
<li>所以我们又知道，子类的实例的属性是子类的构造器的执行的结果。子类实例的原型就是子类的原型。子类原型的proto就是继承的类的原型。</li>
</ul>
<p>继承的ES5的实现</p>
<p>我们需要注意的点：</p>
<ul>
<li>需要执行父类的构造器方法</li>
<li>需要将父类的原型设置为自身的原型，一般来说，原型是不会赋予属性的，所以一般默认都是一个空的对象，然后这个对象的proto属性是Object.prototype。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">function Child() &#123;</span><br><span class="line">	// 调用 父函数的方法，使用call方法进行调用，</span><br><span class="line">	// 这里思考的话需要考虑，如果父函数存在对象返回值的情况，那么会返回的是对象，而不是call方法了。这个需要进行解决。</span><br><span class="line">	Parent.call(this, args)</span><br><span class="line">	</span><br><span class="line">	// 这里写自己的方法</span><br><span class="line">	...</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">实现原型的继承</span><br><span class="line">(function() &#123;</span><br><span class="line">	function Fn() &#123;&#125;</span><br><span class="line">	Fn.prototype = Parent.prototype</span><br><span class="line">	Child.prototype = new Fn()</span><br><span class="line">	Child.prototype.constructor = Child</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line">因为一个new方法就是要，创建一个原型指向了父类的原型的一个对象，然后执行构造器函数</span><br><span class="line">区别就是使用了new方法，然后中间会创建一个对象，对象的原型指向了父类原型，然后我们使用constructor修改了对象的构造器指向，就不会修改到父类的构造器了。</span><br><span class="line"></span><br><span class="line">Child.prototype = Parent.prototype</span><br><span class="line">// 这里是为了修改 构造器的指向，但是因为我们是直接复制的原型，所以这里的修改会影响到父类的构造器的指向。</span><br><span class="line">Child.prototype.constructor = Child</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">class Parent &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.p = 1</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      p: 2,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class Child extends Parent &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    super()</span><br><span class="line">    this.c = 3</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">我们执行之后，发现，返回值 p=2，而不是1.</span><br><span class="line">这里我刚刚百度了一下，在继承里面，ES6，是先super，然后再this，所以对于继承里面，如果没用super，将不能使用this。所以我们大概知道就是 super，先像new一样，然后通过返回将其加入this，然后再使用。</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">简单的一个实现 Super</span><br><span class="line">使用：Super.call(this, Parent)</span><br><span class="line">思路：就是先创建一个空对象，进行调用，然后通过返回值类型来判断，哪个应该合并为this</span><br><span class="line">	缺点：因为是使用对象，而并不是真正的上下文this，所以不能使用一些需要依靠this操作的行为。以及赋值给this是依靠的 Object.assign 进行的操作。</span><br><span class="line"></span><br><span class="line">function Super(Parent) &#123;</span><br><span class="line">  const ctx = &#123;&#125;</span><br><span class="line">  const res = Parent.call(ctx)</span><br><span class="line">  const r = typeof res === &#x27;object&#x27; ? res : ctx</span><br><span class="line"></span><br><span class="line">  Object.assign(this, r)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h3><p>​        简单来说就是用来传递异步的消息。</p>
<p>​        在以往，我们使用异步的形式都是使用的回调函数，就是将回调函数作为参数传递过去，然后方法那边的在异步结束之后再调用这个函数。</p>
<p>​        同时Promise存在三个状态：</p>
<ul>
<li>pending：初始状态</li>
<li>fulfilled：成功的状态</li>
<li>rejected：失败的状态</li>
</ul>
<p>​    <strong>注意</strong>：当状态从pending进入另外两个状态是，将不能改变了。</p>
<p>​        只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。</p>
<p><img src="/.io//promises.png" alt="promises"></p>
<h4 id="Promise-then"><a href="#Promise-then" class="headerlink" title="Promise.then():"></a>Promise.then():</h4><p>​        then() 方法返回一个 Promise (en-US)。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。</p>
<p>​        两个参数：代表了 res 和 err（可选）</p>
<p>​        如果是Promise.then()，如果后面再有 .then() 但是却没有 return一个Promise的，那么就会进入 resolve(undefined) 的情况</p>
<p>返回值：</p>
<p>分为：返回一个值，没有返回，接受状态，拒绝状态，和未定状态。</p>
<ul>
<li>返回了一个值，那么 <code>then</code> 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。</li>
<li>没有返回任何值，那么 <code>then</code> 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 <code>undefined</code>。</li>
<li>抛出一个错误，那么 <code>then</code> 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。</li>
<li>返回一个已经是接受状态的 Promise，那么 <code>then</code> 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。</li>
<li>返回一个已经是拒绝状态的 Promise，那么 <code>then</code> 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。</li>
<li>返回一个未定状态（<code>pending</code>）的 Promise，那么 <code>then</code> 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。</li>
</ul>
<h4 id="Promise-catch"><a href="#Promise-catch" class="headerlink" title="Promise.catch():"></a>Promise.catch():</h4><p>​        catch() 方法返回一个Promise (en-US)，并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected) 相同。 (事实上, calling obj.catch(onRejected) 内部calls obj.then(undefined, onRejected)).</p>
<p>​        参数：onRejected</p>
<p>返回值：<br>        一个Promise.</p>
<p>​        默认一个 resolve，可以返回rejected</p>
<h4 id="Promise-finally"><a href="#Promise-finally" class="headerlink" title="Promise.finally():"></a>Promise.finally():</h4><p>​        finally() 方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在then()和catch()中各写一次的情况。</p>
<p>​        参数：onFinally</p>
<h4 id="Promise-all"><a href="#Promise-all" class="headerlink" title="Promise.all:"></a>Promise.all:</h4><p>​        Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例， 那个输入的所有promise的resolve回调的结果是一个数组。</p>
<p>​        接受一个 promise的iterable类型</p>
<p>​        就是可迭代的promise。需要全部返回resolve才能resolve</p>
<p>​        只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。</p>
<h4 id="Promise-allSettled"><a href="#Promise-allSettled" class="headerlink" title="Promise.allSettled:"></a>Promise.allSettled:</h4><h4 id="Promise-any"><a href="#Promise-any" class="headerlink" title="Promise.any:"></a>Promise.any:</h4><p>​        Promise.any()<code>接收一个 Promise 可迭代对象，只要其中的一个</code>promise<code>成功，就返回那个已经成功的</code>promise</p>
<h4 id="Promise-race"><a href="#Promise-race" class="headerlink" title="Promise.race:"></a>Promise.race:</h4><p>​        将与第一个传递的promise相同的完成方式被完成。就是说，在一个可迭代对象里面，我们将获取到所返回的第一个结果，不管是resolve和rejected。</p>
<h3 id="generator-生成器"><a href="#generator-生成器" class="headerlink" title="generator 生成器"></a>generator 生成器</h3><p>​        生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议。</p>
<p>​        实例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">一个无限的迭代器</span><br><span class="line"></span><br><span class="line">function* idMaker()&#123;</span><br><span class="line">    let index = 0;</span><br><span class="line">    while(true)</span><br><span class="line">        yield index++;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let gen = idMaker(); // &quot;Generator &#123; &#125;&quot;</span><br><span class="line"></span><br><span class="line">console.log(gen.next().value);</span><br><span class="line">// 0</span><br><span class="line">console.log(gen.next().value);</span><br><span class="line">// 1</span><br><span class="line">console.log(gen.next().value);</span><br><span class="line">// 2</span><br><span class="line">// ...</span><br></pre></td></tr></table></figure>

<p>​        通过这个我们可以发现一个可迭代协议和可迭代对象，可迭代协议是一个Es6的补充规范。</p>
<p>​        简单来说，一个可迭代对象就需要实现这个可迭代协议，会实现一个 @@iterator 方法。（原型链上存在也可以），在for of 的循环和使用 spread和rest操作符的时候就会使用上这个可迭代协议。</p>
<p>​        可迭代协议的方法就是返回一个next方法。方法返回一个 done 和 value 属性。</p>
<p>​        而这个就是我们生成器的返回的特点，简单来说就是我们生成器就是一个满足可迭代协议而存在的一个方法。</p>
<h3 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h3><p>​        模块化简单分为 CommonJS、AMD、CMD和现在的ES6</p>
<p>​        其中 AMD 和 CMD 都是参照的 CommonJS</p>
<p>CommonJS：</p>
<p>​        NodeJs发布的。</p>
<p>​        require引入、exports导出</p>
<p>AMD、CMD:</p>
<p>​        define 定义模块，require实现加载。</p>
<p>ES6：</p>
<p>​        使用 import 导入</p>
<p>​        export 导出</p>
<p>​        关键字有import，export，default，as，from。</p>
<p>ES6 和 CommonJS的区别：</p>
<ul>
<li>ES6 是浅拷贝，修改会影响原理的值。<ul>
<li>CommonJS的深拷贝</li>
</ul>
</li>
<li>CommonJS是运行时加载。<ul>
<li>ES6是编译时输出接口，可以单独加载接口。</li>
</ul>
</li>
</ul>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E9%9A%8F%E7%AC%94/" rel="tag"># 随笔</a>
              <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2022/03/03/JavaScript/%E5%AF%B9%E8%B1%A1/Object-proto/" rel="prev" title="Object.__proto__">
                  <i class="fa fa-chevron-left"></i> Object.__proto__
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2022/03/08/JavaScript/%E9%9A%8F%E7%AC%94/JavaScript%E6%A8%A1%E5%9D%97%E5%8C%96/" rel="next" title="JavaScript模块化">
                  JavaScript模块化 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
